<template>
    <div class="weui-panel__bd listItem" >
        <div  class="weui-media-box weui-media-box_appmsg" hover-class="none" @click="toDetail(kcList.id,type,5)" >
            <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                <div class="thumb">
                  <!-- <img class="weui-media-box__thumb " :src="kcList.thumb" mode="aspectFill" lazy-load="true"/> -->
                  <imgLoad 
                     defaultImage='/static/images/z.png'
                     :originalImage='kcList.thumb' 
                     width="308rpx"
                     height="220rpx"
                  />

                  <img src="/static/images/fx.png" alt=""  class="fxRed" v-if="kcList.fx_sta==1">
                </div>
            </div>
            <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                <div class="weui-media-box__desc"> {{kcList.title}}</div>
                <div class='progress' v-if="type==1||type==3" >
                    <span v-if="kcList.discount!=0"> 
                      <span  v-if="kcList.discount==kcList.price">会员免费</span>
                      <span  v-else>会员减{{kcList.discount}}元 </span>
                    </span>
                </div>
                <div class='progress' v-if="type==2">
                   <span  v-if="kcList.discount!=0">
                       <span  v-if="kcList.discount==kcList.price">会员免费</span>
                       <span  v-else>会员减{{kcList.discount}}元 </span> |</span>  
                     限购{{kcList.nums}}人
                </div>
                <div class='price'>
                    <div class="weui-cell__bd"><span>￥{{kcList.price}}</span> <span class="oldPrice">￥{{kcList.prime_price}}</span></div>
                    <div class="weui-cell__ft">
                        <van-tag color="#1A84FB" size="large" v-if="type==1">马上拼课</van-tag>
                        <van-tag color="#1A84FB" size="large" v-if="type==2&&kcList.start">立即抢课</van-tag>
                        <van-tag color="#AFD5FF" size="large" v-if="type==2&&kcList.start==false">即将开枪</van-tag>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

// type==1;拼拼优课
// type=2;砍价秒抢
import imgLoad from "@/components/imgLoad";
export default {
  props: ["kcList", "type"],
  components: {
       imgLoad
   },
  methods: {
    toDetail(id, type,ke) {
      console.log(id, type,ke)
      if (type == 1) {
        console.log(type);
        let url = "/pages/pinDetail/main?id="+id;
        mpvue.navigateTo({ url });
      } else if (type == 2) {
        let url = "/pages/bargainDetail/main?id="+id;
        mpvue.navigateTo({ url });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.listItem {
  .thumb {
    width: 154px;
    height: 110px;
    position: relative;
    .fxRed{
      position: absolute;
      top: 5px;
      left: 5px;
      width:27px;
      height:29px;
      display: block;
    }
    .weui-media-box__thumb {
      width: 154px;
      height: 110px;
    }
  }
  .weui-media-box {
    padding: 10px 15px;
  }
  .weui-media-box__hd_in-appmsg {
    width: 154px;
    height: 110px;
  }
  .weui-media-box__desc {
    font-size: 14px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .weui-media-box_appmsg {
    -webkit-box-align: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .progress {
    font-size: 14px;
    font-weight: 500;
    color: #1a84fb;
    line-height: 1;
    margin-top: 7px;
  }
  .tags {
    line-height: 20px;
    background: rgba(234, 247, 255, 1);
    border: 1rpx solid rgba(70, 183, 255, 1);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(70, 183, 255, 1);
    display: inline-block;
    padding: 0 10px;
    margin-top: 14px;
  }
  .price {
    position: absolute;
    bottom: 10px;
    left: 0;
    padding-left: 180px;
    right: 12px;
    font-size: 15px;
    font-weight: bold;
    color: rgba(233, 181, 94, 1);
    display: flex;
    justify-content: flex-end;
    .oldPrice {
      font-size: 10px;
      font-weight: 500;
      text-decoration: line-through;
      color: rgba(102, 102, 102, 1);
      margin-left: 5px;
    }
  }
  .weui-media-box::after {
    position: absolute;
    bottom: 0;
    right: 15px;
    left: 15px;
    border-bottom: 1rpx solid #ddd;
    content: "";
  }
}
.listItem:nth-last-child(1) .weui-media-box::after {
  border-bottom: none;
}
</style>
